<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style type="text/css">

</style>

<body>

    <script type="text/javascript">
        //vue响应式原理除了Object.defineProperty实现数据劫持外。还有发布订阅者模式 。
        //1.发布订阅者模式实现
        // 发布者 - 目标
        class Dep {
            constructor() {
                // 记录所有的订阅者
                this.subs = []
            }

            // 把订阅者添加到 subs 中
            addSubs(sub) {
                if (sub && sub.update) {
                    this.subs.push(sub)
                }
            }

            //信号中心: 当事件发生，通知所有的订阅者，调用所有观察者的 update() 方法
            notify() {
                this.subs.forEach(sub => {
                    sub.update()
                })
            }
        }

        // 订阅者 - 观察者
        class Watcher {
            // 当事件发生，由发布者调用所有观察者的 update() 方法
            update() {
                // 实现更新视图等功能
                console.log('视图数据更新了');
            }
        }

        // 测试
        let dep = new Dep()
        let watcher = new Watcher()
        //执行发布者
        dep.addSubs(watcher)
        //信号中心通知所有订阅者，更新数据
        dep.notify()

         
        // 总结: vue响应式原理除了Object.defineProperty实现数据劫持外。还有发布 / 订阅模式参与——首先发布订阅者模式由 1，订阅者 2，发布者  3，信号中心组成 。可以假定，存在一个“信号中心”，当某个任务执行完成，就向信号中心“发布”（publish）一个信号，其他任务可以向信号中心“订阅”（subscribe）这个信号，从而知道什么时候自己可以开始执行，这就叫做 “发布 / 订阅模式”
        
        //相关文章链接(一定要看)——https://blog.csdn.net/zimeng303/article/details/111087848
    </script>

</body>

</html>